Uvod

Moodle je najbolje rješenje za online učenje i revolucija za kolegije na Webu. Koristiti Javascript u Moodle-u je veoma korisno kako za administratore tako i za programere. Koriste se ugrađene knjižnice koje pružaju moderno i dinamično iskustvo koje korisnici danas očekuju. Ove upute će Vam prikazati osnove kombiniranja Moodle-a s javascriptom. Osim toga, upoznati ćemo se i s načinom ugrađivanja Yahoo User Interface Libirary (YUI) unutar Moodle-a. Pomoću YUI-a moći ćemo napraviti dinamična sučelja i bolje proizvode za svoje korisnike.

Kombinacija Moodle-a i javascripta

Za početak stvoriti ćemo poddirektorij pod nazivom vjezba. Unutar njega spremamo sve datoteke koje ćemo stvoriti uz pomoć ovih uputa.

Slika 1. Putanja do poddirektorija vjezba

Zatim je potrebno kreirati predložak PHP datoteke pod nazivom blank.php sa sljedećim sadržajem:

Slika 2. Kod datoteke blank.php

Započinjemo datoteku otvaranjem PHP taga koristeći standardnu oznaku <?php . Zatim uključujemo Moodle-ovu konfiguracijsku datoteku. Dodajemo ovaj dokument kako bi postavili potrebno Moodle okružje za programiranje, uključuje dvije globalne varijable koje ćemo koristiti $PAGE i $OUTPUT. $PAGE definira centralno spremište informacija o trenutnoj stranici koju generiramo u odgovoru na korisnikov zahtjev. $OUTPUT se koristi kao generator HTML-a i izlaz, omogućava nam da generiramo zaglavlje i podnožje za našu stranicu na temelju trenutne Moodle-ove teme.

Spremamo datoteku unutar direktorija vjezba. Kako bi provjerili kako to sada izgleda, u naš preglednik unosimo adresu localhost/moodle/vjezba/blank.php

Slika 3. Prikaz datoteke blank.php u pregledniku

Možemo primijetiti da ovaj kod pruža jednostavnu stranicu sa standardnim zaglavljem i podnožjem.

Sada ćemo se upoznati s uključivanjem javascript datoteke koja će imati nastavak .js

Potrebno je stvoriti novu PHP datoteku pod nazivom requirejs.php i pohraniti ju u direktorij vjezba.

Datoteka treba sadržavati sljedeći kod:

Slika 4. Kod datoteke require.js

Stvaramo datoteku prema predlošku koji smo stvorili u prvom koraku i dodajemo liniju koda $PAGE->requires->js('/cook/alert.js'); pomoću koje uključujemo JS datoteku u naš PHP kod.

Zatim stvaramo JS datoteku sa samo jednom linijom koda.

Slika 5. Kod datoteke alert.js

Nakon što učitamo datoteku requirejs.php u našem pregledniku, trebao bi se otvoriti sljedeći prozorčić koji smo stvorili pomoću javascripta.

Slika 6. Prikaz requirejs.php datoteke u pregledniku

Sada kada smo naučili kako učitati JS datoteku, potrebna nam je metoda za izlučivanje koda. I ovaj puta koristiti ćemo $PAGE kako bi pozvali JS funkciju unutar PHP datoteke. Nazvati ćemo je requirejs_init_data.php. Ovaj kod postavlja jednostavnu Moodle stranicu i uključuje JS datoteku koja se naziva require_init_data.js

Slika 7. Prikaz koda datoteke require_init_data.php

Nakon što smo pozvali $PAGE->requires->js, dodali smo sljedeći kod:
$PAGE->requires->js_init_call('hello',
array('Hello', $USER->username));

Prvi parametar je niz koji sadrži ime JS funkcije koju želimo pozvati, u ovom slučaju to je hello.

Drugi parametar je PHP array vrijednosti koje su proslijeđene u JS funkciju, onim redoslijedom kako su definirane.

Korištenjem array-a ovdje dopuštamo js_init_call metodi da podržava veći broj argumenata, u ovom slučaju to su dvije: poruka i korisničko ime.

Stvaramo JS datoteku requirejs_init_data.js

Slika 8. Prikaz koda datoteke require_init_data.js

Sada, kada učitamo stranicu, vidimo JS upozorenje s porukom koju smo postavili s korisničkim imenom trenutnog korisnika.

Slika 9. Prikaz require_init.js datoteke u pregledniku

Sljedeći primjer je prikaz kalendara u moodle-u pomoću JS knjižnice Yahoo! User Interface Libirary (YUI).

YUI (Yahoo User Interface) je jedna od vodećih knjižnica na internetu u upotrebi. Postoji puno zadataka koje treba obaviti tijekom pisanja JavaScript koda. Veliki dio tih zadataka je bavljenje razlikama među web preglednicima. U potrebi za načinima da se sakriju različitosti za svaki preglednik nastale su knjižnice koje okupljaju komplete alata za ove potrebe, poznatije kao JavaScript knjižnice. Sastoji se od kodova pisanih pomoću JS i CSS-a kako bi se omogućilo stvaranje interaktivnih web aplikacija kakve korisnici danas traže.

Unutar ovog primjera prikazati ćemo kako učitati kalendar korištenjem YUI 2 modula unutar YUI 3.

Kao i svaki puta do sada, započinjemo stvaranjem PHP datoteke. Nazvati ćemo je yui_cal.php unutar direktorija vjezba.

Slika 10. Prikaz koda datoteke yui_cal.php

Možemo primijetiti ako yui_cal.php ima poveznicu na JS datoteku yui_cal.js koja se također nalazi unutar direktorija vjezba. Ova PHP datoteka sadrži <div> tag na koji smo postavili ID pod nazivom calContainer. Unutar ovog <div> elementa izvoditi će se nas YUI kod.

Yui_cal.js datoteka sadrži sljedeći kod:

Slika 11. Prikaz koda yui_cal.js

Prvo smo učitali modul pod nazivom yui2-calendar. Svi dostupni YUI 2 moduli se koriste svojim originalnim imenima sa yui2 prefiksima. U sljedećem koraku smo ponovno kreirali objekt iz YUI 2. Ovo je omogućeno kao dio YUI 3 objekta Y, u formi Y.YUI2. Zatim kopiramo to u novi objekt koji smo nazvali YAHOO. Ovo sada odgovara YUI 2 stilu kodiranja i čini lakšim ponovno koristiti YUI 2 kod ovdje. Za kraj stvorili smo novu instancu YUI 2 kalendara YAHOO.widget.Calendar koji će se izvršiti unutar ranije stvorenog div elementa.

Kada učitamo datoteku yui_cal.php u pregledniku, trebao bi se prikazati kalendar kao na sljedećoj slici:

Slika 12. Prikaz yui_cal.php datoteke u pregledniku.

Posljednji primjer također koristi YUI kod.

Postaviti ćemo poveznice na našu stranicu, a JS kod će nam pomoću skočnog prozora javiti koju smo kliknuli.

Stvaramo PHP datoteku pod nazivom yui_delegation.php

Slika 13. Prikaz koda datoteke yui_delegation.php

Stvorili smo PHP datoteku i postavili Moodle programsko okruženje kao i do sada. Unutar ove datoteke uključili smo i neodređenu listu poveznica koje se nalaze unutar div elementa. Na ove poveznice ćemo uključiti događaje na klik pomoću YUI delegation.

Event delegation je tehnika kojom možemo postaviti parent element da upravlja događajima svojih child elemenata. Odabirom poveznica iz primjera možemo koristiti element od kojeg se sastoji naša lista (div id=“container“) da upravlja događajima poveznica koje se nalaze u toj listi.

Koristiti ćemo event delegation kako bi izvršili klik događaj za svaku poveznicu u listi. U trenutku klika na poveznicu pojaviti će se prozorčić upozorenja koji će prikazivati koja je poveznica odabrana. Koristeći ovu metodu možemo dodati poveznica koliko želimo i to bilo kada, izbjegavajuću potrebu da dodamo ili promijenimo bilo koji od naših JS kodova kada to učinimo.

Stvaramo JS datoteku s nazivom yui_delegation.js

Slika 14. Prikaz koda datoteke yui_delegation.js

Kod započinje učitavanjem event-delegate modula koji je potreban za ovu tehniku. To čini dostupnom novu metodz Y.delegate.

Koristeći Y.delegate, provjeravamo događaje na klik za listu poveznica koje se nalaze unutar našeg div elementa s ID-em container.

Kada učitamo stranicu u našem web pregledniku, klikom na bilo koju od poveznica, vidimo kako se pojavljuje upozorenje s porukom koje sadrži naziv poveznice na koju smo kliknuli.

Slika 15. Prikaz datoteke yui_delegation.php u pregledniku

Sada kada smo se upoznali s odgovorom na pitanje ''kako'' koristiti javascript, možemo odgovoriti i na pitanje koje je možda i važnije, a to je ''kada'' ga koristiti. Važno je da uzmemo u obzir ciljanu publiku svojih web aplikacija i zaključiti točno kako ćemo koristiti javascript da bi poboljšali njihov dojam o našoj stranici. Ukoliko pravite stranicu koja će biti korištena od strane šire publike moramo ju učiniti pristupačnom za sve tipove korisnika. To znači da moramo prilagoditi JS funkcionalnosti na našoj stranici na način da budu dostupne onima, koji iz bilo kojeg razloga, ne mogu ili ne žele koristiti preglednik koji u potpunosti podržava javascript.